<script>
  import sheep from '@/sheep';

  export default {
    data() {
      return {
        mode: [
          {
            name: '我的家谱',
            type: 'genealogy',
            select_image: `/index/genealogy_mode_select.png`,
            image: `/index/genealogy_mode.png`,
          },
          {
            name: '我的家庭',
            type: 'family',
            select_image: `/index/family_mode_select.png`,
            image: `/index/family_mode.png`,
          },

        ],
      };
    },
    props: {
      currentMode: {
        type: String,
        default: 'family',
      },
      // 家谱总人数
      total: {
        type: Number,
        default: 0,
      },
      familyTotal:{
        type: Number,
        default: 0,
      }
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    methods: {
      changeMode(type) {
        this.$emit('changeMode', type);
      },
      setImageStyle(width, height) {
        return `width: ${width}rpx;height: ${height}rpx;`;
      },
    },
  };
</script>

<template>
  <view class="family_familyMembers_change flex align-center justify-between">
    <view class="list flex align-center justify-center"
          :class="{
            family_style:currentMode == 'family' && item.type == 'family',
            genealogy_style:currentMode == 'genealogy' && item.type == 'genealogy'
          }"
          v-for="(item,index) in mode" :key="index"
          @click.stop="changeMode(item.type)"
    >
      <image class="ss-m-r-10"
             v-if="currentMode != item.type"
             :style="setImageStyle(29,29)"
             :src="currentMode == item.type ? `${IMG_URL}${item.select_image}` : `${IMG_URL}${item.image}`"
      ></image>
      <view class=""
            style="line-height: 34rpx;"
      >
        {{ item.name }}
      </view>
      <view class="fs_22 color_FFFFFF fw_500 ml_5"
            :class=" currentMode == 'family' ? 'bg_234B7C' : 'bg_FF4206'"
            v-if="currentMode != item.type"
            style="box-shadow: 0 2rpx 4rpx 1rpx rgba(0,0,0,0.16);border-radius: 16rpx 16rpx 16rpx 16rpx;border: 2rpx solid #FFFFFF;padding: 4rpx 12rpx;"
      >
        共{{currentMode == 'family' ?  total : familyTotal }}人
      </view>
      <image class="ss-m-l-8" v-if="currentMode == item.type" :src="`${IMG_URL}/index/nc_sq_edit_icon.png`"
             style="width: 25rpx;height: 25rpx;"></image>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .family_familyMembers_change {
    width: 702rpx;

    .list {
      width: 341rpx;
      height: 77rpx;
      background: #FFECE8;
      border-radius: 8rpx 8rpx 0 0;
      font-weight: bold;
      font-size: 32rpx;
      //line-height: 32rpx;
      color: #A0A0A0;
      border: 2rpx solid #FFECE8;
      border-bottom: 0;
    }
  }

  .family_style {
    background: #FF7D57 !important;
    color: #FFFFFF !important;
    border: 2rpx solid #FF7D57 !important;
    border-bottom: 0 !important;
  }

  .genealogy_style {
    background: #234B7C !important;
    color: #FFFFFF !important;
    border: 2rpx solid #234B7C !important;
    border-bottom: 0 !important;
  }
</style>